<template>
  <div
    id="app"
    :class="{ 'zoom100': zoomSize === 100, 'zoom125': zoomSize === 125, 'zoom150': zoomSize === 150, 'zoom175': zoomSize === 175 }"
  >
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
import { detectZoom } from "@/utils/index"
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true,
      zoomSize: 0
    }
  },
  created() {
    this.changeRoom()
    window.addEventListener('resize', this.changeRoom)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.changeRoom)
  },
  methods: {
    changeRoom() {
      const m = Number(detectZoom());
      switch (m) {
        case 99:
        case 100:
        case 101:
          this.zoomSize = 100;
          break;
        case 124:
        case 125:
        case 126:
          this.zoomSize = 125;
          break;
        case 149:
        case 150:
        case 151:
          this.zoomSize = 150;
          break;
        case 174:
        case 175:
        case 176:
          this.zoomSize = 175;
          break;
      }
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    }
  }
}
</script>
<style lang="scss">
#app {
  &.zoom100 ~ .el-dialog__wrapper {
    zoom: 1;
  }
  &.zoom125 ~ .el-dialog__wrapper {
    zoom: 0.8;
  }
  &.zoom150 ~ .el-dialog__wrapper {
    zoom: 0.67;
  }
  &.zoom175 ~ .el-dialog__wrapper {
    zoom: 0.57;
  }
}
</style>
